<template>
  <div class="home">
    <swiper
      navigation
      :speed="500"
      :scrollbar="{ draggable: true }"
      :loop="true"
      :spaceBetween="30"
      :autoplay="{
        disableOnInteraction: false, // 鼠标滑动后继续自动播放
        delay: 4000, //4秒切换一次
      }"
      :pagination="{ clickable: true }"
    >
      <swiper-slide v-for="(item, i) in banner.items" :key="i">
        <a :href="item.url ? item.url : '#'">
          <img class="w-100" height="180" :src="item.image" />
        </a>
      </swiper-slide>
    </swiper>
    <div class="nav-icons bg-white mt-3 text-center pt-3 text-drak-1">
      <div class="d-flex flex-wrap">
        <div class="nav-item mb-3" v-for="i in 10" key="i">
          <i class="sprite sprite-news"></i>
          <div class="py-2">爆料站</div>
        </div>
      </div>
      <div class="bg-light py-2 fs-sm">
        <i class="sprite sprite-arrow mr-1"></i>
        <span>收起</span>
      </div>
    </div>

    <list-card title="新闻资讯" icon="cc-menu-circle" :categories="newsCats">
      <template #items="{ category }">
        <!-- router-link 原本是a标签 teg=‘div’ 表现为div标签 -->
        <router-link
          :to="`/articles/${item._id}`"
          tag="div"
          class="py-2 fs-lg d-flex"
          v-for="(item, i) in category.newsList"
          :key="i"
        >
          <span class="text-info">[{{ item.categoryName }}]</span>
          <span class="px-2">|</span>
          <span class="flex-1 text-dark-1 text-ellipsis pr-2">{{
            item.title
          }}</span>
          <span class="text-grey-1 fs-sm">{{ dateList(item.createdAt) }}</span>
        </router-link>
      </template>
    </list-card>
    <list-card title="英雄列表" icon="yingxiong" :categories="heroCats">
      <template #items="{ category }">
        <div class="d-flex flex-wrap" style="margin: 0 -0.5rem">
          <router-link
            tag="div"
            :to="`/heroes/${item._id}`"
            class="p-2 text-center"
            style="width: 20%"
            v-for="(item, i) in category.heroList"
            :key="i"
          >
            <img class="w-100" :src="item.avatar" />
            <div>{{ item.name }}</div>
          </router-link>
        </div>
      </template>
    </list-card>

    <list-card title="精彩视频" icon="cc-menu-circle"></list-card>
    <list-card title="图文攻略" icon="cc-menu-circle"></list-card>
  </div>
</template>

<script>
import listCard from "@/components/listCard.vue";
import { ref, reactive, onBeforeMount, computed } from "vue";
import { getNewsCats, getHeroCats, getBanner } from "@/api";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.scss";
import "swiper/components/pagination/pagination.scss";
import "swiper/components/scrollbar/scrollbar.scss";
// import "swiper/components/effect-cube/effect-cube.scss";
import Swiper2, { Navigation, Pagination, Autoplay } from "swiper";
Swiper2.use([Autoplay, Navigation, Pagination]);
import dayjs from "dayjs";
export default {
  name: "Home",
  components: {
    Swiper,
    SwiperSlide,
    listCard,
  },
  setup() {
    const newsCats = ref([]);
    const heroCats = ref([]);
    const banner = ref([]);
    async function fetchNewsCats() {
      const { data: res } = await getNewsCats();
      newsCats.value = res;
    }
    async function fetchHeroCats() {
      const { data: res } = await getHeroCats();
      heroCats.value = res;
    }
    async function fetchBanner() {
      const { data: res } = await getBanner();
      banner.value = res;
    }
    onBeforeMount(() => {
      fetchBanner();
      fetchNewsCats();
      fetchHeroCats();
    });
    const dateList = computed(() => (i) => {
      return dayjs(i).format("MM/DD");
    });
    return {
      newsCats,
      dateList,
      heroCats,
      banner,
    };
  },
};
</script>
<style lang="scss" scoped>
.nav-icons {
  border-top: 1px solid #d4d9de;
  border-bottom: 1px solid #d4d9de;
  .nav-item {
    width: 25%;
    border-right: 1px solid #d4d9de;
    &:nth-child(4n) {
      border-right: none;
    }
  }
}
</style>
<style lang="scss">
.home .swiper-pagination {
  text-align: right;
  padding: 0 0.5rem 0.25rem 0.5rem;
  .swiper-pagination-bullet {
    border-radius: 0.1538rem;
    background: #fff;
    opacity: 1;
    &.swiper-pagination-bullet-active {
      background: #4b67af;
    }
  }
}
</style>
